<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import {FontChart} from '@/utils/utils'
import * as echarts from "echarts"
// import {pipelineStatistics} from "@/api/api/waterSupplyOverview.js";

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    async getData() {
      const response = await pipelineStatistics();
      this.list = response.data;
      this.drawEcharts();
    },
    drawEcharts() {
      let myChart = echarts.init(this.$refs.echarts)
      window.addEventListener('resize', this.drawEcharts)
      let list = this.list;
      let maxValue = Math.max(...list.map(obj => obj.value));

      let echartsMaxValue = Math.round(maxValue * 1.3); // 增加10%
      var option = {
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          top: 10,
          bottom: 0,
        },
        xAxis: {
          max: echartsMaxValue,
          axisLabel: {
            show: true,
            fontSize: FontChart(14),
            color: 'rgba(204, 217, 229, 1)'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#173577',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }

        },
        yAxis: [{
          data: list.map(obj => obj.name),
          axisLabel: {
            fontSize: FontChart(14),
            color: 'rgba(204, 217, 229, 1)',

          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#173577',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        series: [
          {

            type: 'bar',
            name: '管网统计',
            legendHoverLink: false,
            barWidth: '7',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(47, 73, 109, 0.36)'
            },
            label: {
              show: true,
              position: 'right',
              fontSize: 13,
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'bold',
              color: '#FFFFFF',
              backgroundColor: '#035275',
              padding: [2, 4], // 设置背景色区域的内边距，以确保背景色能够显示出来
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: 'rgba(5, 23, 79, 1)'},
                      {offset: 1, color: 'rgba(94, 238, 255, 1)'}
                    ]
                )
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 1,
                    [
                      {offset: 0, color: 'rgba(5, 23, 79, 1)'},
                      {offset: 1, color: 'rgba(255, 255, 67, 1)'}
                    ]
                )
              }
            },
            data: list.map(obj => obj.value),
            markPoint: {
              symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
              symbolSize: [2, 10], // 设置扁圆的宽和高
              data: list.map((obj, index) => ({
                yAxis: index, // 对应柱子的横坐标
                xAxis: obj.value + 0, // 柱子的值加上一些偏移量
              })),
              itemStyle: {
                color: 'rgba(94, 238, 255, 1)' // 设置颜色
              },
              label: {
                show: false, // 不显示标签
              }
            }
          }
        ]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
